<template>
	<view>
		<!-- <nav-header bgColor="bg-custom-color" :isBack="true">
			<block slot="content">{{$t('order.lineUpOrder')}}</block>
		</nav-header> -->

		<scroll-view scroll-x class="bg-white nav text-center fixed">
			<view class="cu-item" :class="index == TabCur ? 'text-blue cur' : ''" v-for="(item, index) in tabNav" :key="index" @tap="tabSelect" :data-id="index">
				{{ tabNav[index] }}
			</view>
		</scroll-view>

		<view class="content">
			<block v-if="TabCur == 0">
				<view class="kuangyuan">
					<view class="kuangyuan-title">矿源</view>
					<view class="kuangyuan-title">1000</view>
				</view>
				<view class="par ky-lc2">
					<view class="son">
						<view class="ky-lc2-title">我的矿源</view>
						<view class="ky-lc2-value">1500</view>
					</view>
					<view class="son">
						<view class="ky-lc2-title">已使用矿源</view>
						<view class="ky-lc2-value">800</view>
					</view>
				</view>
				<view class="padding flex flex-direction">
					<button class="cu-btn bg-tm lg" @click="$common.toPage('../order/form_kuangyuan')">充值</button>
					<button class="cu-btn bg-tm lg margin-tb-sm">记录</button>
				</view>
			</block>
			<block v-if="TabCur == 1">
				<view class="buy">
					<image class="img-view" src="../../static/img/buy_suanli.png" mode="aspectFit" style="height: 90px;"></image>
					<view class="buy-title" style="">购买矿机</view>
				</view>

				<view class="tip">
					<view class="tip-son">200起购</view>
					<view class="tip-son">限额1000</view>
					<view class="tip-son">最小单位20USDT</view>
				</view>
				<view class="sl-lc2">
					<view style="float: left;">
						<view class="sl-lc2-title">持有数量</view>
						<view class="sl-lc2-value">{{ datas.count }}</view>
					</view>
					<view style="float: left;margin-left: 30px;">
						<view class="sl-lc2-title" style="color: #9985C3;">预约数量</view>
						<view class="sl-lc2-value" style="color: #9985C3;">{{ datas.count2 }}</view>
					</view>
					<view class="sysl" style="">剩余算力:{{ datas.sumOrderMoney }}/{{ datas.orderMoneySumMax }}</view>
					<view class="cu-progress round">
						<view class="bg-red" style="background-color: #7CECF8;" :style="[{ width: loading ? datas.sumOrderMoney / datas.orderMoneySumMax + '%' : '' }]"></view>
					</view>
				</view>

				<view class="cu-form-group">
					<view class="title">我的GHMI</view>
					<view>{{ $common.numFilter(userInfo.biDianzi) }}</view>
				</view>
				<view class="cu-form-group">
					<view class="title">GHMI</view>
					<input name="ghmi" v-model="ghmi" placeholder="输入GHMI金额" @input="onKeyGhmi" />
					<button class="cu-btn bg-green shadow sub" @tap="addGhmi(1)">+</button>
					<button class="cu-btn bg-green shadow sub" @tap="addGhmi(-1)">-</button>
				</view>
				<view class="cu-form-group">
					<view class="title">可兑换算力(USDT)</view>
					<input name="ghmi" v-model="usdt" placeholder="输入USDT金额" @input="onKeyUsdt" />
					<button class="cu-btn bg-green shadow sub" @tap="addUsdt(1)">+</button>
					<button class="cu-btn bg-green shadow sub" @tap="addUsdt(-1)">-</button>
				</view>
				<view class="cu-form-group">
					<view class="title">剩余GHMI</view>
					<view>{{ $common.numFilter(userInfo.biDianzi - ghmi) }}</view>
				</view>
				<view class="padding flex flex-direction">
					<button class="cu-btn bg-tm lg" :style="isTrue ? '' : 'background-color: var(--darkGray);'" @tap="tijiao">{{ is ? '立即购买' : '提交中' }}</button>
				</view>
			</block>
		</view>
		<nav-bottom showIndex="3"></nav-bottom>
	</view>
</template>

<script>
var t;
export default {
	data() {
		return {
			datas: {},
			showModal: '',
			modalName: '',
			list: [],
			entity: {
				typeName: ''
			},
			userInfo: null,
			bili: 1,
			is: true,
			isTrue: true,
			CustomBar: this.CustomBar,
			TabCur: 1,
			tabNav: ['矿源', '算力'],
			ghmi: 0,
			usdt: 0,
			buy_suanli: '/static/img/buy_suanli.png',
			loading: false
		};
	},

	onLoad() {
		t = this;
		this.$i18n.locale = t.$common.localRead('local');
		t.userInfo = $common.getUser();
		if (!t.userInfo) {
			$common.notLoginUser();
		}
		console.info(t.userInfo);
		t.getData();
		t.getHuilv();

		t.modalName = 'Modal';
		setTimeout(function() {
			t.loading = true;
		}, 500);
	},
	methods: {
		addGhmi: function(index) {
			if (!t.ghmi) {
				t.ghmi = 0;
			}
			t.ghmi = parseFloat(t.ghmi) + parseFloat(index);
			t.usdt = parseFloat(t.ghmi * t.bili, 2).toFixed(2);
			if (t.usdt < 200 || t.usdt > 1000) {
				t.isTrue = false;
			} else {
				t.isTrue = true;
			}
		},
		addUsdt: function(index) {
			if (!t.usdt) {
				t.usdt = 0;
			}
			t.usdt = parseFloat(t.usdt) + parseFloat(index);
			t.ghmi = parseFloat(t.usdt / t.bili).toFixed(2);
			if (t.usdt < 200 || t.usdt > 1000) {
				t.isTrue = false;
			} else {
				t.isTrue = true;
			}
		},
		onKeyGhmi: function(event) {
			console.info(event.target.value);
			t.usdt = parseFloat(event.target.value * t.bili).toFixed(2);
			if (t.usdt < 200 || t.usdt > 1000) {
				t.isTrue = false;
			} else {
				t.isTrue = true;
			}
		},
		onKeyUsdt: function(event) {
			console.info(event.target.value);
			t.ghmi = parseFloat(event.target.value / t.bili).toFixed(2);

			if (event.target.value < 200 || event.target.value > 1000) {
				t.isTrue = false;
			} else {
				t.isTrue = true;
			}
		},
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
		},
		getData: function() {
			this.$fetch
				.request('orderInfo/getOrderList', {
					addUserId: t.userInfo.id,
					orderState: 50
				})
				.then(res => {
					console.info(res);
					if (res.code == 200) {
						// this.list = res.data.entityList
						t.datas = res.data;
					} else {
						$common.showToast(res.msg);
					}
				})
				.catch(e => {});
		},
		getHuilv() {
			t.$fetch
				.request('api/queryExchange', {
					shortName: 'CNY'
				})
				.then(res => {
					console.info(res.data);
					if (res.status == 'success') {
						t.bili = res.data.USDT;
						t.bili = 0.2329;
						console.info(t.bili);
					} else {
						$common.showToast(res.message);
						console.info('===获取汇率失败==');
					}
				})
				.catch(e => {});
		},
		modalChoose(item) {
			console.info(item);
			if (item.isLock == 1) {
				$common.showToast(t.$t('order.temporarilyOpen'));
				return;
			}
			t.entity = item;
			this.modalName = '';
		},
		tijiao: function() {
			// if (t.userInfo.biDianzi < this.entity.typeValue) {
			// 	$common.showToast('GHMI不足');
			// 	return;
			// }
			if (!t.ghmi) {
				$common.showToast('请输入GHMI金额');
				return;
			}
			if (!t.isTrue) {
				return;
			}
			t.is = !t.is;
			t.isTrue = false;

			let data = {
				addUserId: t.userInfo.id,
				orderMoney: t.ghmi,
				orderType: 5,
				orderNum: 1
			};
			this.$fetch
				.request('orderInfo/save', data, 'POST')
				.then(res => {
					console.info(res);
					if (res.code == 200) {
						console.info('排单成功');
						// $common.showToast('排单成功');
						t.$common.showToast(t.$t('tip.operationSuccess'), 500);
						t.is = !t.is;
						t.isTrue = true;
						// $common.toPage('../order/record', 1, 1000)
					} else {
						$common.showToast(res.msg);
						t.is = !t.is;
						t.isTrue = true;
					}
				})
				.catch(e => {});
		},
		hideModal(e) {
			this.modalName = null;
		}
	}
};
</script>

<style>
.sub {
	border-radius: 8px;
	margin-left: 10px;
	font-size: 20px;
	background-color: #47ddde;
}

.uni-input-input,
.uni-input-placeholder {
	font-size: 14px;
}

.sysl {
	clear: both;
	color: #9985c3;
	padding-top: 20px;
	font-size: 18px;
}

.nav .cu-item.cur {
	font-size: 20px;
	color: #47ddde !important;
}

.btn-sl {
}

.flex-direction {
	/* margin-top: 40px; */
}

.cu-bar.fixed,
.nav.fixed {
	/* position: unset; */
}

.kuangyuan {
	padding: 40px;
	text-align: center;
	background-color: #121e2e;
	margin-top: 20px;
	color: white;
	font-size: 18px;
	margin: 10px;
	border-radius: 10px;
}

.kuangyuan-title {
	height: 40px;
	line-height: 40px;
}

.ky-lc2 {
	margin: 10px;
	background-color: hsla(180, 70%, 57%, 0.19);
	border-radius: 10px;
	padding: 20px 0;
}

.ky-lc2-title {
	color: #4f4f4f;
	font-size: 16px;
	font-weight: 600;
}

.ky-lc2-value {
	color: #47ddde;
	font-size: 20px;
}

.buy {
	/* padding: 20px; */
	/* margin: 20px; */
	/* background-color: #BBF5F6; */
	color: #1f9a9a;
	font-weight: 600;
	font-size: 18px;
	border-radius: 10px;
	position: relative;
	height: 90px;
}

.buy-title {
	position: absolute;
	left: 10%;
	top: 35%;
}

.tip {
	padding: 0 20px;
}

.tip-son {
	float: left;
	border: 1px solid #888;
	border-radius: 20px;
	color: #888;
	margin-right: 10px;
	padding: 0 10px;
}

.sl-lc2-title {
	color: #38d4d5;
	font-size: 16px;
}

.sl-lc2 {
	clear: both;
	margin-top: 30px;
	padding: 20px 20px 0 20px;
}

.sl-lc2-value {
	color: #38d4d5;
}

.sl-lc2-value {
	font-size: 20px;
}

.bz {
	font-size: 20px;
	color: #edb43b;
	border-bottom: 1px solid #40576f;
}

.cu-list.menu > .cu-item {
	background-color: #121e2e;
	color: #e6eeff;
	padding: 5px 16px;
}

.flex-sub {
	text-align: center;
}

.content {
	margin-top: 42px;
	/* height: 60upx;
		line-height: 60upx !important; */
}

.wallet .cu-item:after {
	border-bottom: 0px solid #ddd;
}

.wallet .cu-item {
	background-color: #121e2e;
}

.lc2-son-par {
	display: flex;
	height: 30px;
	line-height: 30px;
}

.lc2-son1-text {
	color: #5c7392;
	flex: 1;
	text-align: center;
}

.lc2-son2-text {
	flex: 1;
	text-align: center;
}

.cu-list.card-menu {
	overflow: hidden;
	margin-right: 0px;
	margin-left: 0px;
	border-radius: 0px;
}
</style>
